/* 全局样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* 侧边栏整体样式 */
.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 260px;
    background-color: #2c3e50;
    color: #ecf0f1;
    overflow-y: auto;
    overflow-x:hidden;
}

/* 侧边栏头部样式 */
.sidebar-header {
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid #34495e;
    user-select: none; /* 禁止用户选中 */
    cursor: pointer; /* 鼠标悬停时显示指针 */
    /* 添加过渡效果，让变化更平滑 */
    transition: transform 0.3s ease, color 0.3s ease;
}

.sidebar-header:hover {
    /* 鼠标悬浮时放大 1.25 倍 */
    transform: scale(1.25);
    /* 鼠标悬浮时改变文字颜色，这里设置为橙色，你可以根据需要修改 */
    color: #FFA500;
}

/*搜索栏的样式*/
.search-box {
    padding: 10px;
    position: relative;
}

/* 搜索框样式 */
.search-box {
    position: relative; /* 确保子元素定位上下文 */
    width: 260px; /* 输入框宽度 */
}

.search-box input[type="text"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 14px;
}

/* 搜索结果容器样式 */
.search-ul {
    position: absolute;
    background-color: #ffffff;
    border-radius: 7px;
    padding: 0;
    display: none;
    z-index: 2;
    width: 240px;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e0e0;
}

/* 单个搜索结果项的样式 */
.search-ul li {
    max-height: 40px;
    padding: 10px 15px;
    width: 100%;
    height: auto;
    border-bottom: 1px solid #f1f1f1;
    color: #333333;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    list-style: none;
}

/* 鼠标悬停时的效果 */
.search-ul li:hover {
    background-color: #f0f8ff;
    color: #007bff;
}

/*键盘的选中*/
.search-ul .key-select {
    background-color: #f0f8ff;
    color: #007bff;
}

/* 隐藏最后一个 li 的下边框 */
.search-ul li:last-child {
    border-bottom: none;
}

/* 滚动条样式优化 */
.search-ul::-webkit-scrollbar {
    width: 6px;
}

.search-ul::-webkit-scrollbar-thumb {
    background-color: #d1d1d1;
    border-radius: 3px;
}

.search-ul::-webkit-scrollbar-track {
    background-color: #f9f9f9;
}


.search-box input[type="text"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

/* 菜单容器样式 */
.menu-container {
    padding: 10px 0;
}

/* 菜单项样式 */
.menu-item {
    position: relative;
}

.menu-item a {
    display: flex;
    align-items: center;
    padding: 0;
    color: #ecf0f1;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

/* 让 a 标签内的 span 填充剩余空间 */
.menu-item a span,
.submenu a span {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 15px 20px;
    transition: transform 0.3s ease;
    cursor: pointer;
    user-select: none;
}

.menu-item a:hover {
    background-color: #34495e;
    transform: scale(1.05); /* 鼠标悬停时放大 1.05 倍 */
}

/* 子菜单样式 */
.submenu {
    max-height: 0;
    overflow: hidden;
    background-color: #34495e;
    transition: max-height 0.3s ease-out;
}

.submenu a {
    display: flex;
    align-items: center;
    padding: 0;
}

.submenu a span {
    padding-left: 50px;
}

/* 定义带有 href 的 a 标签被点击时的样式 */
.menu-item a[href].active,
.submenu a[href].active {
    background-color: #FF4500; /* 可根据需求修改背景颜色 */
}

/* 图标样式 */
.icon-dashboard::before,
.icon-inventory::before,
.icon-order::before,
.icon-user::before,
.icon-report::before,
.icon-setting::before,
.icon-list::before,
.icon-adjustment::before,
.icon-transfer::before,
.icon-incoming::before,
.icon-outgoing::before,
.icon-tracking::before,
.icon-user-list::before,
.icon-role::before,
.icon-inventory-report::before,
.icon-order-report::before,
.icon-warehouse::before,
.icon-parameter::before,
.icon-arrow::before {
    width: 24px;
    height: 24px;
    margin-right: 15px;
    text-align: center;
    font-size: 20px;
}

.icon-dashboard::before {
    content: "📊";
}

.icon-inventory::before {
    content: "📦";
}

.icon-order::before {
    content: "📄";
}

.icon-user::before {
    content: "👤";
}

.icon-report::before {
    content: "📈";
}

.icon-setting::before {
    content: "⚙️";
}

.icon-list::before {
    content: "📋";
}

.icon-adjustment::before {
    content: "🔧";
}

.icon-transfer::before {
    content: "➡️";
}

.icon-incoming::before {
    content: "⬅️";
}

.icon-outgoing::before {
    content: "➡️";
}

.icon-tracking::before {
    content: "📍";
}

.icon-user-list::before {
    content: "👥";
}

.icon-role::before {
    content: "🎭";
}

.icon-inventory-report::before {
    content: "📦📈";
}

.icon-order-report::before {
    content: "📄📈";
}

.icon-warehouse::before {
    content: "🏭";
}

.icon-parameter::before {
    content: "📐";
}

.icon-arrow::before {
    content: "▶️";
    margin-left: auto;
    margin-right: 0;
    transition: transform 0.3s ease;
}

/* 子菜单样式 */
.submenu {
    max-height: 0;
    overflow: hidden;
    background-color: #34495e;
    transition: max-height 0.3s ease-out;
}

.submenu a {
    display: flex;
    align-items: center;
    padding: 0;
}

.submenu a span {
    padding-left: 50px;
}

/* 展开子菜单时箭头旋转 */
.menu-item.active .icon-arrow::before {
    transform: rotate(90deg);
}

